<template>
  <div>
    <!-- 绑定上传Excel文件的事件监听 -->
    <upload-excel :on-success="onSuccess" :before-upload="beforeUpload" />
  </div>
</template>

<script>
// 导入上传Excel表单的api接口
import { reqImportEmployee } from '../../api/employees'
export default {
  name: 'Import',
  methods: {
    // 上传文件之前执行该函数
    beforeUpload (file) {
      // 参数file其实就是选中的文件
      if (file.name.endsWith('.xlsx')) {
        // 选中的文件是Excel格式
        return true
      } else {
        this.$message.error('仅仅支持Excel文件')
        return false
      }
    },
    //! 封装独立的 正式数据转换
    translateData (data) {
      //! 中文和属性的映射关系(正式数据的属性名 中文替换英文)
      const userRelations = {
        '入职日期': 'timeOfEntry',
        '手机号': 'mobile',
        '姓名': 'username',
        '转正日期': 'correctionTime',
        '工号': 'workNumber'
      }
      //! 基于data中的数据定制接口需要的数据格式(把数据的中文名称 替换为英文名称)
      // results = [{"手机号":15751786628,"姓名":"张飞1","入职日期":43535,"转正日期":43719,"工号":88088},{"手机号":15751786630,"姓名":"关羽2","入职日期":43535,"转正日期":43719,"工号":88089}]
      // 需要把results数据中的中文替换为英文（接口需要）
      const persons = [] // 储存替换中文后的正式数据
      // 循环遍历 生成一个正式数据
      data.results.forEach(person => {
        // 生成一个储存正式数据的新对象(新对象 存入 新数组中)
        const p = {}
        // 通过循环 设置正式数据的属性
        //! 对象key可以是一个动态变量
        //!  因为key值是动态的 所以必须要用[]来调用 []等同于. 都是获取属性名里面的值
        for (const key in person) {
          // 获取正式数据的属性名
          const k = userRelations[key]// mobile
          // 获取Excel表格中 属性名对应的数值
          const v = person[key] // 15751786628
          // 格式化时间 按后端需求转换时间
          if (['timeOfEntry', 'correctionTime'].includes(k)) {
            // 格式化时间后 把正式属性名 和 对应的属性值拼起来
            p[k] = this.formatDate(v) // {mobile, 15751786628, ....}
          } else {
            // 不需要格式化 默认赋值即可
            p[k] = v
          }
        }
        // 把处理完的数据 添加到正式数据的数组中
        persons.push(p)
      })
      console.log(persons)
      // 把正式数据return返回给方法
      return persons
    },
    //! 转换日期的格式(后端需求的时间)
    formatDate (numb, format) {
      const time = new Date((numb - 1) * 24 * 3600000 + 1)
      time.setYear(time.getFullYear() - 70)
      const year = time.getFullYear() + ''
      const month = time.getMonth() + 1 + ''
      const date = time.getDate() - 1 + ''
      if (format && format.length === 1) {
        return year + format + (month < 10 ? '0' + month : month) + format + (date < 10 ? '0' + date : date)
      }
      return year + (month < 10 ? '0' + month : month) + (date < 10 ? '0' + date : date)
    },
    //! 导入Excel格式化的数据 并且上传到服务器上
    async onSuccess (data) {
      try {
        //! 导入封装的正式数据格式化方法 格式化用户传来的Excel表格 让其变为正式数据 上传到服务器
        const ret = this.translateData(data)
        // 获取到格式化的数据后 上传到服务器
        const rett = await reqImportEmployee(ret)
        if (rett.code === 10000) {
          // 如果上传成功 跳转到员工页面
          this.$router.push('/employees')
        } else {
          // 非服务上传失败提示用户
          this.$message.error(ret.message)
        }
      } catch (error) {
        // 服务器问题上传失败 提示用户
        this.$message.error('导入员工失败')
      }
    }
  }
}

</script>

<style>
</style>
